<template>
	<div class="shop">
		<div class="shop-header" :style="{backgroundImage:'url('+bgimage(rest.image_path)+')'}">
			<div class="shop-header-nav">
				<a>
					<span class="glyphicon glyphicon-menu-left"></span>
				</a>
			</div>
			<div class="shop-header-main">
				<img class="shop-header-logo" :src="rest.image_path | bgurl" />
				<div class="shop-header-logoright">
					<h2>{{rest.name}}</h2>
					<p>
						<span>蜂鸟专送</span>
						<span style="color: gainsboro;">/</span>
						<span>{{rest.order_lead_time}}分钟送达</span>
						<span style="color: gainsboro;">/</span>
						<span>{{rest.piecewise_agent_fee.description}}</span>
						<a href=""><span class="glyphicon glyphicon-menu-right"></span></a>
					</p>
					<div class="shop-header-notice">
						<span>公告：</span>
						<span>{{rest.promotion_info}}</span>
					</div>
				</div>
			</div>
			<div class="shop-header-activities">
				<i>{{rest.activities[0].icon_name}}</i>
				<span>{{rest.activities[0].description}}</span>
				<div class="shop-header-activityCount">{{rest.activities.length}}个活动</div>
			</div>
		</div>
		<!--内容-->
		<div class="shop-tab-container">
			<div class="shop-tab-tab active" @click="changetab1"><span class="active">商品</span></div>
			<div class="shop-tab-tab" @click="changetab2"><span>评价</span></div>
		</div>

		<div class="menuview1">
			<ul class="menucategory">
				<a href.prevent="#0" style="text-decoration: none;"><li class="menucategory-list listactive" @click="changefood">
					<span v-if="restfoods[0].icon_url.length>0"><img :src="restfoods[0].icon_url | bgurl" /></span>{{restfoods[0].name}}
				</li></a>
				<a  style="text-decoration: none;"><li class="menucategory-list" v-for="restfood in restfoods.slice(1)" @click="changefood">
					<span v-if="restfood.icon_url.length>0"><img :src="restfood.icon_url | bgurl" /></span>{{restfood.name}}
				</li></a>
			</ul>
			<div class="scroller">
				<div v-for="(restfood1,index) in restfoods">
					<div class="scroller-header">
						<a :name="index" :id="index"><strong>{{restfood1.name}}</strong></a>
						<span class="desc">{{restfood1.description}}</span>
						<span class="glyphicon glyphicon-option-horizontal"></span>
					</div>
					<div class="scroller-food" v-for="food in restfood1.foods">
						<img :src="food.image_path | bgurl" />
						<div class="scroller-word">
							<h2>{{food.name}}</h2>
							<p>
								<span>月售{{food.month_sales}}份</span>
								<span>好评率{{food.satisfy_rate}}%</span>
							</p>
							<div class="scroller-bottom">
								<strong>
								<span class="money">￥</span>{{food.specfoods[0].price}}
								<span v-if="food.specfoods.length>1"><span class="start">起</span></span>
							</strong>

								<div v-if="food.specfoods.length>1">
									<div class="size">选规格</div>
								</div>
								<div v-else>
									<div class="glyphicon glyphicon-plus-sign"></div>
								</div>


							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<div class="menuview2">
			这里是评价
		</div>
	</div>
</template>

<script>
	//导入总线
	import bus from '../bus.js'

	export default {
		name: 'shop',
		data() {
			return {
				msg: '这是商家店面',
				rest: {},
				restfoods: []
			}
		},
		filters: {
			//			https://fuss10.elemecdn.com/3/b0/c2fb5c0adbb22b496ebc3ca258d8djpeg.jpeg?imageMogr/thumbnail/!130x130r/gravity/Center/crop/130x130/
			bgurl: function(aaa) {
				if(aaa){
					return '//fuss10.elemecdn.com/' + aaa.slice(0, 1) + '/' + aaa.slice(1, 3) + '/' + aaa.slice(3, 32) + aaa.slice(32) + '.' + aaa.slice(32) + '?imageMogr/thumbnail/!130x130r/gravity/Center/crop/130x130/'
				}
				
			}
		},
		methods: {
			changetab1(e) {
				//console.log(e.target)
				var $e = $(e.target)
				if($e[0].tagName == 'SPAN') {
					$e = $e.parent()
				}
				//console.log($e)
				$e.children().addClass('active')
				$e.next().children().removeClass('active')
				$('.menuview1').show()
				$('.menuview2').hide()
			},
			changetab2(e) {
				//console.log(e.target)
				var $e = $(e.target)
				if($e[0].tagName == 'SPAN') {
					$e = $e.parent()
				}
				//console.log($e)
				$e.children().addClass('active')
				$e.prev().children().removeClass('active')
				$('.menuview1').hide()
				$('.menuview2').show()
			},
			changefood(e){
//				console.log(e.target)
				var $e = $(e.target)
				if($e[0].tagName == 'IMG') {
					$e = $e.parent().parent()
				}
				$e.addClass('listactive').siblings().removeClass('listactive')
				
			},
			getrest(id) {
				var url = '/elm/shopping/restaurant/' + id + '?extras[]=activities&extras[]=albums&extras[]=license&extras[]=identification&latitude=26.150047&longitude=119.131724'
				this.$http.get(url).then((res) => {
					console.log(res.body)
					this.rest = res.body

				})
			},
			getfoods(id) {
				var url = '/elm/shopping/v2/menu?restaurant_id=' + id
				this.$http.get(url).then((res) => {
					console.log(res.body)
					this.restfoods = res.body
				})
			},
			bgimage(bbb){
				if(bbb){
					return 'https://fuss10.elemecdn.com/'+bbb.slice(0,1)+'/'+bbb.slice(1,3)+'/'+bbb.slice(3,32)+bbb.slice(32)+'.'+bbb.slice(32)+'?imageMogr/thumbnail/!40p/blur/50x40/'
				}
			}
		},
		created() {
			bus.$emit('tell-show', false)
			console.log(this.$route.params.id)
			this.getrest(this.$route.params.id)
			this.getfoods(this.$route.params.id)
//			$('.menuview1 .menucategory .menucategory-list').eq(0).addClass('listactive')
		},
		destroyed() {
			//销毁完成时
			bus.$emit('tell-show', true)
		}
	}
</script>

<!--scoped ��ʽֵʹ�õ�ǰ���-->
<style scoped>
	.shop {}

	.shop-header {
		height: 100%;
		width: 100%;
		background-color: #3190e8;
		background-size: cover;
		background-repeat: no-repeat;
		opacity: 0.9;
		color: #fff;
		font-size: .293333rem;
	}

	.shop-header .shop-header-nav {
		position: relative;
		padding: .106667rem .266667rem;
		/*background-color: red;*/
		width: 100%;
	}

	.shop-header .shop-header-nav a {
		display: block;
		width: .666667rem;
		height: .666667rem;
		color: #fff;
	}

	.shop-header .shop-header-nav a span {
		font-size: .533333rem;
	}

	.shop-header .shop-header-main {
		position: relative;
		display: flex;
		/*flex-wrap: wrap;*/
	}

	.shop-header .shop-header-main .shop-header-logo {
		width: 1.733333rem;
		height: 1.733333rem;
		border: 1px solid #fff;
		border-radius: .106667rem;
		margin: 0 .266667rem;
		max-width: 100%;
	}

	.shop-header .shop-header-main .shop-header-logoright {}

	.shop-header .shop-header-main .shop-header-logoright h2 {
		margin: 0;
		font-size: .466667rem;
		line-height: 1.2em;
		font-weight: 700;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.shop-header .shop-header-main .shop-header-logoright p {
		white-space: nowrap;
		height: .666667rem;
		line-height: .666667rem;
	}

	.shop-header .shop-header-main .shop-header-logoright p a {
		color: #fff;
	}

	.shop-header .shop-header-main .shop-header-logoright p a .glyphicon-menu-right {
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: .133333rem;
		height: .333333rem;
		width: .666667rem;
		fill: #fff;
	}

	.shop-header .shop-header-main .shop-header-logoright .shop-header-notice {
		height: .533333rem;
		line-height: .533333rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.shop-header .shop-header-main .shop-header-logoright .shop-header-notice span {
		line-height: .533333rem;
	}

	.shop-header .shop-header-activities {
		align-items: center;
		font-size: .266667rem;
		padding-right: 1.28rem;
		margin: .266667rem;
		position: relative;
		padding-bottom: .133333rem;
	}

	.shop-header .shop-header-activities i {
		background-color: rgb(112, 188, 70);
		color: rgb(255, 255, 255);
		border-color: rgb(112, 188, 70);
		margin-right: .133333rem;
		font-size: .266667rem;
		font-style: normal;
		line-height: 1;
		height: .293333rem;
		display: inline-block;
		box-sizing: border-box;
		text-align: center;
		border: 1px solid;
		border-radius: .04rem;
	}

	.shop-header .shop-header-activities span {
		white-space: nowrap;
		line-height: .426667rem;
		font-size: .266667rem;
	}

	.shop-header .shop-header-activities .shop-header-activityCount {
		position: absolute;
		top: 0;
		right: 0;
	}

	.shop-tab-container {
		line-height: 1.2rem;
		display: flex;
		background-color: #fff;
		margin-top: -.266667rem;
	}

	.shop-tab-container .shop-tab-tab {
		width: 50%;
		text-align: center;
		font-size: .373333rem;
		border-bottom: .026667rem solid #ddd;
		cursor: pointer;
	}

	.shop-tab-container span.active {
		color: #3190e8;
		border-bottom: .053333rem solid #3190e8;
		padding-bottom: .08rem;
	}

	.menuview1 {
		height: 11.786667rem;
		/*padding-bottom: 1.28rem;*/
		background-color: #fff;
		/*background-color: lightblue;*/
		display: flex;
	}

	.menuview1 .menucategory {
		list-style: none;
		padding: 0;
		margin: 0;
		overflow-y: auto;
		height: 100%;
		background-color: #f8f8f8;
		width: 2.266667rem;
		color: #333;
	}

	.menuview1 .menucategory .menucategory-list {
		position: relative;
		padding: .466667rem .2rem;
		border-bottom: 1px solid #ededed;
		font-size: .346667rem;
		color: #666;
	}

	.menuview1 .menucategory .menucategory-list img {
		width: .24rem;
		height: .333333rem;
		max-width: 100%;
		margin-right: 3px;
	}

	.menuview1 .menucategory .listactive {
		background-color: #fff;
		border-right-color: #fff;
		font-weight: bolder;
	}

	.menuview1 .scroller {
		width: 100%;
		overflow-y: auto;
		height: 100%;
		/* background-color: red; */
		color: #333;
		line-height: 1.2;
	}

	.menuview1 .scroller .scroller-header {
		position: relative;
		margin-top: -.026667rem;
		padding: .2rem .266667rem;
		background-color: #f1f1f1;
		display: flex;
		/*line-height: 1.2;*/
	}

	.menuview1 .scroller .scroller-header strong {
		margin-right: .133333rem;
		font-weight: 700;
		font-size: .373333rem;
		color: #666;
		flex: none;
	}

	.menuview1 .scroller .scroller-header .desc {
		/*flex: 1;*/
		display: block;
		color: #999;
		font-size: .266667rem;
		white-space: nowrap;
		overflow: hidden;
		line-height: 1.8;
	}

	.menuview1 .scroller .scroller-header .glyphicon-option-horizontal {
		position: absolute;
		display: block;
		color: darkgray;
		right: .213333rem;
		top: .28rem;
		/*width: .933333rem;*/
		z-index: 2;
		background: #f1f1f1
	}

	.menuview1 .scroller .scroller-food {
		position: relative;
		background-color: #fff;
		margin: 0;
		padding: .4rem .266667rem;
		margin-bottom: 1px;
		display: flex;
		flex-wrap: wrap;
		min-height: 2.933333rem;
    margin-top: -.026667rem
	}

	.menuview1 .scroller .scroller-food .scroller-word {
		position: relative;
		width: 5.546667rem;
	}

	.menuview1 .scroller .scroller-food img {
		margin-right: 4%;
		display: block;
		vertical-align: top;
		width: 1.386667rem;
		height: 1.386667rem;
		border-radius: .053333rem;
		max-width: 100%;
	}

	.menuview1 .scroller .scroller-food .scroller-word h2 {
		font-size: .4rem;
		font-weight: 700;
		line-height: 1.1;
	}

	.menuview1 .scroller .scroller-food .scroller-word p {
		margin: .173333rem 0;
		color: #666;
		font-size: .293333rem;
		line-height: 1;
	}

	.menuview1 .scroller .scroller-food .scroller-word .scroller-bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		font-weight: 700;
		font-size: .426667rem;
		line-height: .426667rem;
		color: #f60;
		display: flex;
		width: 100%;
		height: 25px;
		line-height: 1.6;
	}

	.menuview1 .scroller .scroller-food .scroller-word .scroller-bottom strong .money {
		font-weight: 400;
		font-size: .293333rem;
		display: inline-block;
	}

	.menuview1 .scroller .scroller-food .scroller-word .scroller-bottom strong .start {
		margin-left: .053333rem;
		font-size: .32rem;
		color: #666;
		font-weight: 400;
	}

	.menuview1 .scroller .scroller-food .scroller-word .glyphicon-plus-sign {
		width: .533333rem;
		height: .533333rem;
		padding: .093333rem;
		font-size: 20px;
		line-height: 0.5;
		position: absolute;
		right: 0;
		color: #3190e8;
	}

	.menuview1 .scroller .scroller-food .scroller-word .size {
		position: absolute;
		right: 0;
		color: #fff;
		background-color: #3199e8;
		padding: 0 .2rem;
		font-size: .32rem;
		border-radius: .346667rem;
		line-height: .666667rem;
	}

	.menuview2 {
		height: 11.786667rem;
		padding-bottom: 1.28rem;
		/*background-color: #fff;*/
		background-color: lightcoral;
		display: none;
	}
</style>
